<template>
  <div>
    <button @click="num++">父组件按钮{{ num }}</button>
    <hr />
    <!-- 依赖注入 父辈组件提供数据 所有后代组件都可以访问 -->
    <Btn />
  </div>
</template>
<script>
import Btn from "./components/Btn.vue";
// 结合组合式api
// 1.
import { computed } from "vue";
export default {
  data() {
    return {
      num: 100,
    };
  },
  // 提供给后代的数据
  // 死数据
  // provide: {
  //   x: 10,
  // },
  // 还是死数据 能访问实例而已
  // provide() {
  //   return {
  //     x: this.num,
  //   };
  // },
  // 响应数据
  provide() {
    return {
      // 保持数据响应性
      x: computed(() => this.num),
      // 把父组件变更数据的方法 传过去
      add: this.add,
    };
  },
  methods: {
    add() {
      this.num++;
    },
  },
  components: {
    Btn,
  },
};
</script>
